<template>
  <div>
    <maiDog
    v-for="(item,index) in list" :key="index"
    :item = 'item'
    :index = 'index'
    @dog = dogFn
    ></maiDog>
    <div class='left'>你喜欢的狗如下：<p v-for="item in loveDog" :key='item'>{{item}}</p></div>
  </div>
</template>

<script>
import maiDog from './components/maidog.vue'
export default {
    components: {
        maiDog
    },
    data () {
        return {
            list: [
                {
                    dogUrl:'https://img2.baidu.com/it/u=3889165113,3468943411&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=500',
                    name:'狗一'
                },
                {
                    dogUrl:'https://img1.baidu.com/it/u=3970739407,3792072150&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
                    name:"狗二"
                },
                {
                    dogUrl:"https://img1.baidu.com/it/u=2491026098,4159380659&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=499",
                    name:'狗三'
                }
            ],
            loveDog:[]
        }
    },
    methods:{
        dogFn(index) {
            this.loveDog.push(this.list[index].name)
        }
    }
}
</script>

<style>
.left {
    width: 100px;
    height: 200px;
    float: left;
}
p {
    line-height: 0;
}
</style>